<template>
  <ThreeFrame
    :obj3Ds = "obj3Ds"
  ></ThreeFrame>
</template>

<script setup>
import * as THREE from 'three';
import { TextGeometry } from 'three/examples/jsm/geometries/TextGeometry'
import ThreeFrame from './ThreeFrame.vue'
import { ref, onMounted, watch } from 'vue'
import * as fontUtils from '../utils/fontUtils'
const emits = defineEmits(['encoder-decoder-selected']);

const props = defineProps({
  input: {
    type: String,
    required: true
  },
  output: {
    type: String,
    required: true
  }
})

const obj3Ds = ref([])
let inputTextObj = null
let outputTextObj = null
const textGroup = new THREE.Group()

const getInputStr = () => {
  return props.input ? props.input.slice(0, 15) + (props.input.length > 15 ? '...' : '' ) : '<Input>'
}

const getOutputStr = () => {
  return props.output ? props.output.slice(0, 15) + (props.output.length > 15 ? '...' : '' ) : '<Output>'
}

watch([()=>props.input, ()=>props.output], ()=>{
  if (inputTextObj) {
    fontUtils.loadFont(fontLoaded)
  }
})

function fontLoaded(font) {
  if (inputTextObj) {
    textGroup.remove(inputTextObj)
    textGroup.remove(outputTextObj)
  }

  // 创建文字
  let text = fontUtils.createTextObjectOnBoxFront(font, 'Encoder', -1, false, 1)
  textGroup.add(text)

  text = fontUtils.createTextObjectOnBoxFront(font, 'Decoder', 1, false, 1)
  textGroup.add(text)

  text = fontUtils.createTextObject(font, 'Transformer', fontUtils.figureFontSize, fontUtils.textObjectHeight, fontUtils.textColor, -1, -1, 0)
  textGroup.add(text)

  const inputStr = getInputStr()
  text = fontUtils.createTextObject(font, inputStr, fontUtils.textFontSize, fontUtils.textObjectHeight, fontUtils.textColor, -3.5, 0, 0)
  textGroup.add(text)
  inputTextObj = text

  const outputStr = getOutputStr()
  text = fontUtils.createTextObject(font, outputStr, fontUtils.textFontSize, fontUtils.textObjectHeight, fontUtils.textColor, 2.5, 0, 0)
  textGroup.add(text)
  outputTextObj = text

  obj3Ds.value = [...obj3Ds.value, textGroup]
}


function initObj3Ds() {
    // 添加长方体盒子
    const box1 = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshPhongMaterial({ color: 0xff0000 })
    );
    box1.position.x = -1;
    box1.onSelected = () => {
      emits('encoder-decoder-selected')
    }

    // scene.add(box1);
    const box2 = new THREE.Mesh(
      new THREE.BoxGeometry(1, 1, 1),
      new THREE.MeshPhongMaterial({ color: 0x00ff00 })
    );
    box2.position.x = 1;

    // 添加中间箭头
    const arrow1 = new THREE.ArrowHelper(
      new THREE.Vector3(1, 0, 0),
      new THREE.Vector3(-0.5, 0, 0),
      1,
      0xff00ff
    );

    // 添加左侧箭头
    const arrow2 = new THREE.ArrowHelper(
      new THREE.Vector3(1, 0, 0),
      new THREE.Vector3(-2.5, 0, 0),
      1,
      0xff00ff
    );

    // 添加右侧箭头
    const arrow3 = new THREE.ArrowHelper(
      new THREE.Vector3(1, 0, 0),
      new THREE.Vector3(1.5, 0, 0),
      1,
      0xff00ff
    );

    // // 创建一个平面几何体
    // let geometry = new THREE.PlaneGeometry(1, 2);
    // // 加载图片
    // let textureLoader = new THREE.TextureLoader();
    // let texture = textureLoader.load('/transformer-encoder.png');
    // // 创建一个材质，并将图片应用于材质
    // let material = new THREE.MeshBasicMaterial({ map: texture });
    // // 创建一个网格，并将平面几何体和材质应用于网格
    // let planeMeshEncoder = new THREE.Mesh(geometry, material);

    // planeMeshEncoder.position.set(-1, 1.5 + 0.1, 0)

    // // 创建一个平面几何体
    // geometry = new THREE.PlaneGeometry(1, 3);
    // // 加载图片
    // textureLoader = new THREE.TextureLoader();
    // texture = textureLoader.load('/transformer-decoder.png');
    // // 创建一个材质，并将图片应用于材质
    // material = new THREE.MeshBasicMaterial({ map: texture });
    // // 创建一个网格，并将平面几何体和材质应用于网格
    // let planeMeshDecoder = new THREE.Mesh(geometry, material);

    // planeMeshDecoder.position.set(1, 2 + 0.1, 0)

    return [box1, box2, arrow1, arrow2, arrow3] //, planeMeshEncoder, planeMeshDecoder]
}

onMounted(() => {
  console.log('TransformerEncoderDecoder onMounted')
  obj3Ds.value = initObj3Ds()
  fontUtils.loadFont(fontLoaded)
})

</script>